<template>
  <!-- 请假申请搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="员工姓名" v-if="sole == 10">
        <el-input placeholder="请输入内容" style="width:120px;"
                  v-model="searchApplication.doctor" @keydown.enter="loadApplication"/>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
            style="width:180px;" type="datetime" placeholder="请选择开始时间"
            v-model="searchApplication.startTime" @change="loadApplication"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
            style="width:180px;" type="datetime" placeholder="请选择结束时间"
            v-model="searchApplication.endTime" @change="loadApplication"
        />
      </el-form-item>
      <el-form-item label="请假状态">
        <el-select placeholder="请选择状态" style="width:150px;"
                   v-model="searchApplication.status" @change="loadApplication">
          <el-option label="待审批" value="10"/>
          <el-option label="撤回" value="20" v-if="sole != 10"/>
          <el-option label="驳回" value="30"/>
          <el-option label="已通过" value="40"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadApplication">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 请假申请列表 -->
  <el-card style="margin:20px;">
    <el-table :data="applicationArr"
              :default-sort="{ prop: 'status', order: 'ascending' }">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="adminDoctorVO.doctor" label="员工姓名" align="center"/>
      <el-table-column prop="startTime" label="开始时间" align="center"/>
      <el-table-column prop="endTime" label="结束时间" align="center"/>
      <el-table-column prop="reason" label="请假理由" align="center"/>
      <el-table-column prop="status" label="申请状态" align="center"
                       :formatter="applicationFormatter"/>
      <el-table-column prop="createTime" label="申请时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editApplication(scope.row.id)">查看详情</el-button>
          <el-button link type="primary" size="small" @click="deleteApplication(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!-- 请假申请详情 -->
  <el-dialog :title="'申请详细情况('+statusApplication+')'" v-model="editDialog" style="width: 60vw">
    <el-descriptions border direction="vertical">
      <el-descriptions-item
          :rowspan="2"
          :width="180"
          label="员工照片"
          align="center"
      >
        <el-image
            style="width: 100px; height: 100px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </el-descriptions-item>
      <el-descriptions-item label="员工姓名">{{ editOneApplication.adminDoctorVO.doctor }}</el-descriptions-item>
      <el-descriptions-item label="电话号码">{{ editOneApplication.adminDoctorVO.phone }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{ editOneApplication.adminDoctorVO.age }}</el-descriptions-item>
      <el-descriptions-item label="职位">{{ editOneApplication.adminDoctorVO.department }}</el-descriptions-item>
      <el-descriptions-item label="申请时间">{{ editOneApplication.createTime }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ editOneApplication.startTime }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{ editOneApplication.endTime }}</el-descriptions-item>
      <el-descriptions-item label="申请原因" :span="3">
        {{ editOneApplication.reason }}
      </el-descriptions-item>
      <el-descriptions-item label="驳回原因" v-if="editOneApplication.status == 30">
        {{ editOneApplication.rejectReason }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer >
      <el-button type="success" @click="agreeApplication" v-if="sole == 10 && editOneApplication.status == 10">同意</el-button>
      <el-button type="danger" @click="rejectDialog = true;" v-if="sole == 10 && editOneApplication.status == 10">驳回</el-button>
      <el-button type="warning" @click="withdrawBut" v-if="sole != 10 && editOneApplication.status == 10">撤回</el-button>
      <el-button @click="editDialog = false;">取消</el-button>
    </template>
  </el-dialog>

  <el-dialog title="驳回理由" v-model="rejectDialog" :before-close="dialogClose">
    <el-input placeholder="请输入驳回理由" v-model="rejectFrom.rejectReason"/>
    <template #footer v-if="editOneApplication.status == 10">
      <el-button type="danger" @click="sureReject" >确认</el-button>
      <el-button @click="dialogClose">取消</el-button>
    </template>
  </el-dialog>

</template>
<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 保存员工职位
const sole = ref(getUser().sole)

// 保存搜索信息
const searchApplication = ref({doctorId:'',doctor:'',startTime:'',endTime:'',status:'',sole:''});
// 保存搜索到的员工请假信息
const applicationArr = ref([

])
// 搜索请假信息
const loadApplication = () => {
  searchApplication.value.doctorId = getUser().id;
  searchApplication.value.sole = getUser().sole;
  let data = qs.stringify(searchApplication.value)
  console.log( searchApplication.value)
  axios.get(BASE_URL+'/v1/application/select?'+data).then((response)=>{
    if (response.data.code === 2000){
      applicationArr.value = response.data.data;
      console.log(applicationArr.value)
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(()=>{
  loadApplication();
  console.log(getUser().sole)
})
// 重置搜索列表
const resetSearch = () => {
  searchApplication.value.staffName = '';
  searchApplication.value.startTime = '';
  searchApplication.value.endTime = '';
  searchApplication.value.status = '';
  loadApplication();
}

const editDialog = ref(false);
// 保存请假申请详情
const editOneApplication = ref({adminDoctorVO:{}})
// 保存修改假条的信息
const rejectFrom = ref({rejectReason:'',id:''})
const statusApplication = ref("")
// 查看假条详情
const editApplication = (applicationId) => {
  console.log(applicationId);
  rejectFrom.value.id =applicationId;
  editDialog.value = true;
  axios.get(BASE_URL+'/v1/application/select?id='+applicationId).then((response)=>{
    if (response.data.code === 2000){
      editOneApplication.value = response.data.data[0];
      console.log(editOneApplication.value);
      statusApplication.value = applicationFormatter(1,1,editOneApplication.value.status)
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

// 驳回理由弹窗设置
const rejectDialog = ref(false);
// 关闭输入驳回理由弹窗
const dialogClose = () => {
  if (confirm("确认关闭该弹窗吗？")){
    rejectFrom.value.rejectReason = '';
    rejectDialog.value = false;
  }
}
// 同意申请
const agreeApplication = () => {
  let data = qs.stringify(rejectFrom.value);
  axios.post(BASE_URL+'/v1/application/updateStatus',data).then((response)=>{
    if (response.data.code === 2000){
      ElMessage.success("审批通过");
      rejectDialog.value = false;
      editApplication(rejectFrom.value.id);
      loadApplication();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 确认驳回
const sureReject = () => {
  if (rejectFrom.value.rejectReason == '' || rejectFrom.value.rejectReason.trim().length == 0){
    ElMessage.warning('驳回理由不能为空');
    return
  }
  if (confirm("确认驳回该请假申请吗？")){
    let data = qs.stringify(rejectFrom.value);
    console.log(data);
    axios.post(BASE_URL+'/v1/application/updateStatus',data).then((response)=>{
      if (response.data.code === 2000){
        ElMessage.success("驳回成功");
        rejectDialog.value = false;
        rejectFrom.value.reasonReason = '';
        editApplication(rejectFrom.value.id)
        loadApplication();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

// 删除请假申请
const deleteApplication = (applicationId) => {
  if (confirm("确认删除该申请吗？")){
    axios.post(BASE_URL+'/v1/application/delete/'+applicationId).then((response)=>{
      if (response.data.code === 2000){
        ElMessage.success("删除成功");
        loadApplication();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//定义方法对车辆表格的车辆类型进行显示文字转换
const applicationFormatter = (row, column, cellValue,index)=>{
  if(cellValue == 10){
    cellValue = '待审批';
  }else if(cellValue == 20){
    cellValue = '撤回';
  }else if(cellValue == 30){
    cellValue = '驳回';
  }else if(cellValue == 40){
    cellValue = '已通过';
  }
  return cellValue;
}


</script>

<style scoped>

</style>